<template>
	<view>
		<view class="commodity_box">
			<view class="order_box">
				<view class="orde_image">
					<text class="orderName">{{ $t('orderFrom.OrderNumber') }}</text>
					<text class="orderName" style="color:#1D1F21 ;">{{detailsFrom.order_sn}}</text>
					<text :style="{color:detailsFrom.statusColor,float:'right'}">{{detailsFrom.status_desc}}</text>
				</view>
				<view v-for="(item,index) in detailsFrom.order_detail" :key="index" class="order_detail">
					<u-image width="164rpx" height="164rpx" border-radius="4rpx" :src="item.goods_images" />
					<view class="particular">
						<view class="between">
							<view class="goods_name">
								<text>{{item.goods_name}}</text>
							</view>
							<text>￥{{item.goods_price}}</text>
						</view>
						<text class="unit_box unitAcound">x{{item.num}}</text>
					</view>
				</view>
				<view class="between" style="padding: 20rpx 0;">
					<text>{{detailsFrom.nickname}}</text>
					<text>{{ $t('orderFrom.Total') }}<text style="color: orangered;">￥{{detailsFrom.total_price}}</text></text>
				</view>
			</view>
			<view class="details_box">
				<view class="">
					<text>{{ $t('orderFrom.CreationTime') }}</text>
					<text>{{detailsFrom.create_time}}</text>
				</view>
				<view class="">
					<text>{{ $t('orderFrom.Remark') }}</text>
					<text>{{detailsFrom.message}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		orderDeatils
	} from '@/api/warehouse.js'
	export default {
		data() {
			return {
				transmit: {},
				detailsFrom: {}
			}
		},
		onPullDownRefresh() {
			this.detailsFrom = {}
			this.getDetails()
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('orderFrom.OrderDetails')
			})
		},
		onLoad(item) {
			this.transmit = item
			this.getDetails()

		},
		methods: {
			getDetails() {
				orderDeatils(this.transmit.id).then(res => {
					uni.stopPullDownRefresh()
					res = {
						...res,
						statusColor: this.statusColor(res)
					}
					this.detailsFrom = res
					// console.log(this.detailsFrom);
				})

			},
			statusColor(item) {
				// 1 待支付 2 已完成 3 已取消 4 待出库 5待审核 6 审核中 7 待发货
				let statusColor
				switch (item.status) {
					case 1:
						statusColor = '#0156E9'
						break;
					case 2:
						statusColor = '#309910'
						break;
					case 3:
						statusColor = '#808186'
						break;
					case 4:
						statusColor = '#E9014D'
						break;
					case 5:
						statusColor = '#0156E9'
						break;
					case 6:
						statusColor = '#FF7709'
						break;
					case 7:
						statusColor = '#E9014D'
						break;
				}
				return statusColor
			},
		}
	}
</script>

<style lang="scss" scoped>
	.commodity_box {
		margin: auto;
		margin-top: 36rpx;
		padding: 0 20rpx;
	}

	.orde_image {
		padding: 20rpx 0;
		border-bottom: 2rpx solid #E9E9E9;
	}

	.order_box {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		margin-top: 36rpx;
		border-bottom: 2rpx solid #E9E9E9;
	}

	.order_detail {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}


	.particular {
		width: calc(100% - 192rpx);
		height: 164rpx;
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.goods_name {
		width: 300rpx;
		overflow: hidden;
		/* 确保超出容器的文本被裁剪 */
		white-space: nowrap;
		/* 确保文本在一行内显示 */
		text-overflow: ellipsis;
		/* 使用省略号表示文本超出 */
		font-weight: bold;
	}

	.between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.orderName {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #77797A;
		line-height: 33rpx;
		font-style: normal;
		text-transform: none;
	}

	.cover {
		width: 164rpx;
		height: 164rpx;
		border-radius: 4rpx;
	}

	.unit_box {
		font-family: Arial, Arial;
		font-weight: 400;
		font-size: 20rpx;
		font-style: normal;
	}

	.unit {
		color: #494949;
	}

	.unitAcound {
		margin-left: 16rpx;
		color: #A1A1A1;
		margin-left: auto;
	}

	.details_box {
		display: flex;
		flex-direction: column;
		gap: 10rpx;

		>view {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;
		}
	}
</style>